<template>
  <view class="container">
    <uni-forms ref="form" :model="form" labelWidth="120px" labelPosition="top">
      <view class="hidden-title">检修方案</view>
      <cu-cell-group class="bor-top">
        <uni-forms-item name="examineUserIds">
          <cu-cell
            title="检修人员"
            required
            link
            placeholder="请选择"
            :description="authLabel"
            @click="userClick()"
          ></cu-cell>
        </uni-forms-item>
        <uni-forms-item name="examineStartTime" label="检修开始时间">
          <uni-datetime-picker
            v-model.trim="form.examineStartTime"
            hide-second
            :end="form.examineStartTime"
            type="datetime"
          >
            <cu-cell
              title="检修开始时间"
              required
              link
              placeholder="选择时间"
              :description="form.examineStartTime"
            ></cu-cell>
          </uni-datetime-picker>
        </uni-forms-item>
        <uni-forms-item name="examineEndTime">
          <uni-datetime-picker
            v-model.trim="form.examineEndTime"
            hide-second
            :end="form.examineEndTime"
            type="datetime"
          >
            <cu-cell
              title="检修结束时间"
              required
              link
              placeholder="选择时间"
              :description="form.examineEndTime"
            ></cu-cell>
          </uni-datetime-picker>
        </uni-forms-item>
      </cu-cell-group>
      <view class="background-white bor-top">
        <uni-forms-item name="examineQuality" label="检修质量要求">
          <uni-easyinput
            type="textarea"
            v-model="form.examineQuality"
            placeholder="请输入检修质量要求"
            maxlength="50"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="acceptStandard" label="验收标准">
          <uni-easyinput
            type="textarea"
            v-model="form.acceptStandard"
            placeholder="请输入验收标准"
            maxlength="50"
          ></uni-easyinput>
        </uni-forms-item>
      </view>

      <view class="flex justify-between items-center pr-30">
        <view class="hidden-title">检修步骤</view>
        <view class="flex items-center blue" style="cursor: pointer" @click="plusRow">
          <image class="icon-style" src="/static/images/icon-add.png" mode="aspectFill"></image>
          添加
        </view>
      </view>
      <view class="background-white bor-top">
        <template v-for="(item, index) in form.itemList">
          <uni-forms-item
            label="检修步骤"
            required
            :rules="[{ required: true, errorMessage: '检修步骤必填' }]"
            :key="item.id"
            :name="['itemList', index, 'examineStep']"
          >
            <view class="form-item">
              <uni-easyinput v-model="form.itemList[index].examineStep" placeholder="请输入检修步骤" />
            </view>
          </uni-forms-item>
          <uni-forms-item
            label="安全措施"
            required
            :rules="[{ required: true, errorMessage: '安全措施必填' }]"
            :key="item.id"
            :name="['itemList', index, 'measures']"
          >
            <view class="form-item">
              <uni-easyinput v-model="form.itemList[index].measures" placeholder="请输入安全措施" />
            </view>
          </uni-forms-item>
        </template>
      </view>
    </uni-forms>
    <user-selector ref="userDict" title="检修人员" @change="userConfirm"> </user-selector>

    <view class="submit-group">
      <button class="u-button" :ripple="true" @click="submit">提交申请</button>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import UserSelector from '@/components/user-selector/index.vue'
import { apply } from '@/api/repair/repair.js'

export default {
  components: {
    CuCellGroup,
    UserSelector
  },
  data() {
    return {
      id: '',
      procTaskId: '',
      form: {
        examineUserIds: '',
        examineStartTime: '',
        examineEndTime: '',
        examineQuality: '',
        acceptStandard: '',
        itemList: [{ examineStep: '', measures: '' }]
      },
      authLabel: '',
      startTimeLabel: '',
      endTimeLabel: '',

      rules: {
        examineUserIds: {
          rules: [
            {
              required: true,
              errorMessage: '检修人员不能为空'
            }
          ]
        },
        examineStartTime: {
          rules: [
            {
              required: true,
              errorMessage: '检修开始时间不能为空'
            }
          ]
        },
        examineEndTime: {
          rules: [
            {
              required: true,
              errorMessage: '检修结束时间不能为空'
            }
          ]
        },
        examineQuality: {
          rules: [
            {
              required: true,
              errorMessage: '检修质量要求不能为空'
            }
          ]
        },
        acceptStandard: {
          rules: [
            {
              required: true,
              errorMessage: '验收标准不能为空'
            }
          ]
        },
        examineStep: {
          rules: [
            {
              required: true,
              errorMessage: '检修步骤不能为空'
            }
          ]
        },
        measures: {
          rules: [
            {
              required: true,
              errorMessage: '安全措施不能为空'
            }
          ]
        }
      }
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  onLoad(option) {
    if (!option.data) return
    let data = JSON.parse(option.data)
    this.id = data.id
    this.procTaskId = data.procTaskId
  },
  methods: {
    plusRow() {
      let row = { examineStep: '', measures: '' }
      this.form.itemList.push(row)
    },
    userClick() {
      this.$refs.userDict.open()
    },
    userConfirm(obj) {
      this.authLabel = obj.name
      this.form.examineUserIds = obj.value
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        let data = {
          applyInfo: this.form,
          deviceExamineWorkflowEntity: {
            opinionType: 'PASS'
          },
          procTaskId: this.procTaskId,
          id: this.id
        }
        apply(data).then((res) => {
          this.$modal.showToast('上报成功')
          uni.$emit('refresh')
          uni.navigateBack()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 200rpx;

  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.blue {
  color: #88b4c4;
}

.icon-style {
  width: 52rpx;
  height: 42rpx;
  padding-right: 10rpx;
}
.input {
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  height: 60rpx;
}
</style>
